<template>
    <div>
        <label :for="id">{{ label }}</label>
        <input :id="id" :type="type" :value="value" @input="updateValue($event.target.value)" @blur="onBlur">
        <ul v-if="showList">
            <li v-for="item in filteredList" :key="item" @click="selectItem(item)">{{ item }}</li>
        </ul>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
    props: {
        label: {
            type: String,
            required: true
        },
        type: {
            type: String,
            default: 'text'
        },
        value: {
            type: [String, Number],
            required: true
        },
        id: {
            type: String,
            required: true
        },
        list: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            showList: false,
            filteredList: []
        };
    },
    methods: { 
        updateValue(value: string | number) {
            this.$emit('update:value', value);
            this.filterList(value);
        },
        filterList(value:string) {
            this.filteredList = this.list.filter((item: string) => item.includes(value));
            this.showList = this.filteredList.length > 0;
        },
        selectItem(item: string) {
            this.$emit('update:value', item);
            this.showList = false;
        },
        onBlur() {
            setTimeout(() => {
                this.showList = false;
            }, 200);
        }
    }
});

</script>